'use client';
import Title from '../Title';
import { ConfigProvider, Space } from 'antd';
import { Table } from 'antd';
import dayjs from 'dayjs';
import { useOrderList } from '../../hooks/useOrderList';
import { useEffect, useState } from 'react';
export default function CustomerTable() {
	const { data, isLoading } = useOrderList();
	const [loading, setLoading] = useState(false);
	useEffect(() => {
		setLoading(isLoading);
	}, [isLoading]);
	return (
		<Space
			style={{
				padding: '12px 12px 12px 24px',
				background: 'rgba(0,0,0,0.1)',
				borderRadius: 16
			}}
			direction="vertical"
			size={12}
		>
			<Title title="物流伙伴海运实时订单"></Title>
			<div
				style={{
					width: '384px'
				}}
			>
				<ConfigProvider
					theme={{
						token: {
							colorBgContainer: '#181C33',
							// colorPrimary: 'red'
							colorText: 'rgba(255,255,255,0.6)'
						},
						components: {
							Table: {
								headerBg: '#2C2C45',
								headerBorderRadius: 0,
								headerColor: 'rgba(255,255,255,0.8)',
								headerSplitColor: '#2C2C45',
								borderColor: '#181c33',

								cellFontSizeSM: 12,
								cellPaddingInlineSM: 2,
								cellPaddingBlockSM: 3
							}
						}
					}}
				>
					<Table
						loading={loading}
						dataSource={data}
						bordered={false}
						rowKey="orderNo"
						size="small"
						pagination={false}
						columns={[
							{
								title: '订单号',
								align: 'left',
								key: 'orderNo',
								dataIndex: 'orderNo',
								width: 150,
								ellipsis: true
							},
							{
								title: '启运港',
								align: 'left',
								key: 'loadPortCode',
								dataIndex: 'loadPortCode'
							},
							{
								title: '目的港',
								align: 'left',
								key: 'dischargePortCode',
								dataIndex: 'dischargePortCode'
							},
							{
								width: 110,
								title: '预计开航时间',
								align: 'right',
								dataIndex: 'shipEtd',
								key: 'shipEtd',
								render(v) {
									return v ? dayjs(v).format('YYYY-MM-DD') : '';
								}
							}
						]}
					></Table>
				</ConfigProvider>
			</div>
		</Space>
	);
}

